<!-- 教师端抽取正文模块 -->
<template>
<el-form :model="form" ref="formRef" label-width="80px" class="form-container">
    <el-row :gutter="20" class="form-row">
      <!-- 论文名称 -->
      <el-col :span="5">
        <el-form-item label="论文名称">
          <el-input
            class="input"
            v-model="form.title"
            placeholder="请输入论文名称"
          />
        </el-form-item>
      </el-col>

      <!-- 学生学号 -->
      <el-col :span="5">
        <el-form-item label="学生学号">
          <el-select
            class="select"
            v-model="form.accout"
            filterable
            clearable
            placeholder="请选择学生学号"
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>

      <!-- 学生姓名 -->
      <el-col :span="5">
        <el-form-item label="学生姓名">
          <el-select
            class="select"
            v-model="form.name"
            filterable
            clearable
            placeholder="请选择学生姓名"
          >
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>

      <!-- 毕业年份 -->
      <el-col :span="5">
        <el-form-item label="毕业年份">
          <el-select
            class="select"
            v-model="form.graduateYear"
            filterable
            clearable
            placeholder="请选择毕业年份"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>

      <!-- 按钮 -->
      <el-col :span="4" class="button-col">
        <el-form-item label="">
          <el-button type="primary" @click="onSearch">搜索</el-button>
          
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

    <div class="all">
        <el-table
            :data="tableData"
            height="450"
            :align="'center'">
            
            <el-table-column
            fixed
            prop="paperName"
            label="论文题目"
            width="250px"
            :align="'center'">
            </el-table-column>
            <el-table-column
            prop="sid"
            label="学生学号"
            width="100px"
            :align="'center'">
            </el-table-column>
            <el-table-column
            prop="sname"
            label="学生姓名"
            width="100px"
            :align="'center'">
            </el-table-column>
            <el-table-column
            prop="major"
            label="专业"
            width="150px"
            :align="'center'">
            </el-table-column>
            <el-table-column
            prop="content"
            label="抽取正文的主要内容"
            :align="'center'"
            >
            </el-table-column>
        
            
            
        </el-table>
    </div>
    <div class="block">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
        </el-pagination>
    </div>
</template>

<script setup>
    import { reactive, ref } from 'vue'
    // 每个下拉框独立的数据源
    const value1 = ref('')
    const value2 = ref('')
    const form = reactive({
    title: '',
    major: '',
    student: '',
    })

        const options1 = [
    { value: '1', label: '2023' },
    { value: '2', label: '2022' },
    { value: '2', label: '2021' }

    ]

    const options2 = [
    { value: 'a', label: '2023319087' },
    { value: 'b', label: '2023319024' },
    { value: 'c', label: '2023319034' }
    ]

    const options3 = [
    { value: 'a', label: '张三' },
    { value: 'b', label: '李四' },
    { value: 'c', label: '王五' }
    ]
    const tableData = ref([
    {
    paperName: '智能检测系统的设计与实现',
    sid: '20240101',
    sname: '张三',
    major: '人工智能',
    time: '2025-07-01',
    content: '本研究围绕智能检测系统展开，结合深度学习算法和传感器技术，实现对复杂场景中目标的高效识别与追踪，为工业自动化提供可靠方案，提升生产效率和质量控制水平。'
  },
  {
    paperName: '基于大数据的论文分析平台',
    sid: '20240102',
    sname: '李四',
    major: '数据科学',
    time: '2025-07-02',
    content: '论文提出一个整合自然语言处理与大数据分析的毕业论文分析平台，支持海量文档的快速拆解、关键词提取与主题聚类，能辅助教师和管理者进行质量评估与趋势预测。'
  },
  {
    paperName: '前端架构在管理系统中的应用',
    sid: '20240103',
    sname: '王五',
    major: '软件工程',
    time: '2025-07-03',
    content: '本文从前端架构演进入手，分析了组件化开发、模块管理和状态同步机制在现代管理系统中的实践应用，有效提升系统可维护性、扩展性与开发协同效率。'
  }
    ])
        
</script>

<style scoped>
.form-container{
  margin-top: 20px;
}
.all{
    margin-top: 40px;
    
  
}
.lab{
    width: 65px;
}
.two{
    display: flex;
    margin: 30px;
    gap: 5px;
}
.select{
    width: 250px;
}
.input{
    width: 250px;
}
.block{
    display: flex;
    justify-content: flex-end;
    margin: 20px;
}
.button1{
    width: 70px;
    background-color: #ff3838;
    border: #ff3838;
    margin-left: 10px;
}
.button2{
    width: 70px;
    margin-left: 10px;
}

</style>
